<template>
  <div v-if="commentList">
    <div class="item" v-for="(comment, index) in commentList" :key="comment.id">
      <div class="leftInfo">
        <div class="head">
          <!-- 头像 -->
          <img
            :src="$axios.defaults.baseURL + comment.account.defaultAvatar"
            alt=""
          />
          <div class="nickname">
            <span>{{ comment.account.nickname }}</span>
            <P>LV8</P>
          </div>
        </div>
        <div class="botton">{{ comment.myDate }}</div>
      </div>
      <div class="rightMain">
        <h1 v-html="comment.content"></h1>
        <!-- 显示评论打分 -->
        <div>
          <el-rate disabled v-model="value" :colors="colors"> </el-rate>
        </div>
        <!-- 显示图片 -->
        <div class="imgList" v-if="comment.pics.length > 0">
          <!-- 使用组件开启图片预览功能 -->
          <el-image
            class="commentImg"
            :src="$axios.defaults.baseURL + img.url"
            :preview-src-list="[$axios.defaults.baseURL + img.url]"
            v-for="img in comment.pics"
            :key="img.id"
          >
          </el-image>
        </div>
        <div class="input">
          <input
            v-model="comment.newContent"
            type="text"
            placeholder="添加回复..."
            @focus="show(index)"
            :class="{
              avtive: currentNum == index,
            }"
            @blur="hide"
          />
          <div
            class="reply"
            v-if="currentNum == index"
            @click="seatSumit(index)"
          >
            回复
          </div>
        </div>
      </div>
    </div>
    <div class="page" v-if="commentLength > 0">
      <el-pagination
        :page-sizes="[2, 5, 10, 20]"
        :page-size="limit"
        layout="total,sizes,prev, pager, next,jumper"
        :total="commentLength"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      limit: 2,
      start: 0,
      time: "",
      commentList: "",
      isShow: false,
      currentNum: -1,

      value: 3.5,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
    };
  },
  props: ["id", "commentLength"],

  created() {
    // 根据id发送请求获取酒店的评论
    this.location();
  },
  methods: {
    // 封装评论函数
    location() {
      this.$axios({
        url: "/hotels/comments",
        params: {
          hotel: this.id,
          _limit: this.limit,
          _start: this.start,
        },
      }).then((res) => {
        // console.log(res, "res");
        if (res.status === 200) {
          // 将事件转化为平常使用的时间格式
          res.data.data.forEach((element) => {
            element.myDate = moment(res.data.data.created_at).format(
              "YYYY-MM-DD"
            );
          });

          this.commentList = res.data.data.map((item) => {
            // 计算每条评论的打分情况
            this.value =
              (item.score.all +
                item.score.location +
                item.score.service +
                item.score.fancility) /
              5;

            // console.log(!item.pics[0].url, 1);
            if (item.pics.length > 0 && item.pics[0].url == undefined) {
              console.log(1);
              item.pics = [];
            }
            return {
              ...item,
              newContent: "",
            };
          });
        }
      });
    },
    sizeChange(pageSize) {
      this.limit = pageSize;
      this.location();
    },
    currentChange(pageIndex) {
      this.start = pageIndex - 1;
      this.location();
    },
    show(index) {
      this.currentNum = index;
    },
    hide() {
      // 失焦之前完成点击事件
      this.currentNum = -1;
    },
    seatSumit(index) {
      this.hide();
      return;

      let data = {
        content: this.commentList[index].newContent,
        score: this.score,
        // pics: [],
        hotel: this.id,
      };

      // 发送请求发布评论

      this.$axios({
        method: "post",
        utl: "/comments",
        data,
        headers: {
          Authorization: "Bearer " + this.$store.state.user.userInfo.token,
        },
        // "Content-Type": "application/json",
      }).then((res) => {});
    },
  },

  destroyed() {
    clearInterval(this.time);
  },
};
</script>

<style lang="less" scoped>
.commentPark {
  margin-bottom: 10px;
}
.item {
  border-bottom: 1px solid #e4e4e4;
  padding-bottom: 10px;
  margin-bottom: 10px;
  display: flex;
  .leftInfo {
    width: 150px;
    margin-right: 10px;
    .head {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      .nickname {
        margin-left: 4px;
        font-size: 14px;
        color: #f7ba2a;
      }
    }
  }
  .rightMain {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 3px;
    margin-right: 10px;
    h1 {
      font-weight: normal;
      font-size: 16px;
    }
    .imgList {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      /deep/ .commentImg {
        margin-right: 4px;
        margin-bottom: 10px;
        border-radius: 8px;
        box-shadow: 0px 1px 2px 1px #d7c0c0;
        width: 278px;
        height: 150px;

        border: 1px solid #e4e4e4;
        img {
          object-fit: cover;
        }
      }
    }

    .input {
      width: 100%;
      input {
        width: 96%;
        height: 34px;
        outline: none;
        margin-top: 10px;
        padding-bottom: 12px;
        border: none;
        border: 1px solid #e4e4e4;
        border-radius: 4px;
        padding-left: 10px;
        box-sizing: content-box;
        transition: all 0.5s ease;
      }

      .avtive {
        height: 34px;
        padding-bottom: 58px;
        transition: all 0.5s ease;
      }
      .reply {
        margin-top: 10px;
        width: 32px;
        height: 24px;
        line-height: 24px;
        padding: 4px 10px;
        background-color: #ffa800;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        transition: all 0.5s ease;
      }
    }
  }
}
.page {
  margin: 10px 0;
}
</style>